var app = getApp();
var WxParse = require('../../wxParse/wxParse.js');
var utils = require('../../utils/shop/formatShop.js');
var util = require('../../utils/util.js');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //产品信息
    productDetail:{},

    //保障条件图片
    icon_bz: "../../images/gou.png",

    //属性弹窗
    showModalStatus: false,
    imageHeight: 0,
    imageWidth: 0,

    //购买需要传输的信息
    postData: {
      UsersID: '',      //商家ID
      User_ID: 0,       //会员ID
      OwnerID: 0,       //会员上级ID
      ProductsID: 0,    //产品ID  在 onLoad中赋值
      spec_list: '',    //选择属性id  1,2   数字从小到大
      cattsel: '',      //选择属性名称
      count: 0,         //选择属性的库存
      showimg: '',      //选择属性的图片(用产品图片代替)
      Qty: 1,           //购买数量
      cart_key: '',     //购物车类型   CartList（加入购物车）、DirectBuy（立即购买）、PTCartList（不能加入购物车）
      type: 'cart'
    },
    Biz_Commit: [],//评论
    check_attr: {},    //记录选择的属性
    check_attrid_arr: [],
    submit_flag: false, //提交按钮状态

    cart_pro_num: 0,   //购物车产品数量

    pro_share_poster: 0,  // 是否可海报分享（保存图片，转发，需支持https）
    share_bottom_show: false, // 弹窗分享或海报 是否显示
    fenxiang_show: false, // 分享弹窗是否显示
    ewmurl: '', // 分享二维码
    pro_img: '', // 产品图片

    flashsale: 0, // 是否为限时抢购
  },

  // 获取商家评论
  getBizCommit: function () {
    var getping = {
      act:'get_commit',
      Products_ID: this.data.postData.ProductsID, 
      cart_key: 'CartList' 
    }
    app.http_req(getping, app.globalData.init.api_url, 'POST', this.BizCommit);
  },

  // 商家评论回调
  BizCommit: function (res) {
    var Biz_Commit = this.data.Biz_Commit ? this.data.Biz_Commit : [];
    if (res.errorCode == 0) {
      var Biz_Commit = res.data 
      console.log(Biz_Commit.length)
      if (Biz_Commit.length > 2 ){
        Biz_Commit = res.data.slice(0,2)
      }
      for (var i in Biz_Commit) {
        // res.data[i].user.User_Mobile = res.data[i].User_Mobile ? untils.replace_str(res.data[i].User_Mobile) : '';
        Biz_Commit[i].CreateTime = utils.formatTime('yyyy/M/d', Biz_Commit[i].CreateTime);
      };
      this.setData({
        Biz_Commit: Biz_Commit
      })
    }
  },

  //打开页面
  openUrl: function (e) {
    util.openUrl(e.currentTarget.dataset.url);
  },

  //购买数量加号的事件
  bindPlus: function () {
    if (this.data.postData.Qty < this.data.postData.count) {
      this.setData({
        'postData.Qty': this.data.postData.Qty + 1
      })
    } else {
      wx.showToast({
        title: '购买数量不能大于库存量',
        icon: 'none',
      });
      this.setData({
        'postData.Qty': this.data.postData.count
      })
    }
  },
  //购买数量减号的事件
  bindMinus: function () {
    if (this.data.postData.Qty > 1) {
      this.setData({
        'postData.Qty': this.data.postData.Qty - 1
      });
    } else {
      wx.showToast({
        title: '购买数量不能小于1',
        icon: 'none',
      });
      this.setData({
        'postData.Qty': 1
      });
    }
  },
  //输入产品数量
  bindManual: function (e) {
    var Qty = e.detail.value;
    if (Qty < 1) {
      wx.showToast({
        title: '购买数量不能小于1',
        icon: 'none',
      });
      Qty = 1;
    } else if (Qty > this.data.postData.count) {
      wx.showToast({
        title: '购买数量不能大于库存量',
        icon: 'none',
      });
      Qty = this.data.postData.count;
    }
    this.setData({
      'postData.Qty': Qty
    });
  },

  //选择属性值事件
  selectAttrValue: function (e) {
    var value_index = e.currentTarget.dataset.valueindex; //选择的属性值索引
    var attr_index = e.currentTarget.dataset.attrindex;   //选择的属性索引
    if (this.data.check_attrid_arr.indexOf(value_index) > -1) return false;
    //记录选择的属性
    var check_attr = Object.assign(this.data.check_attr, { [attr_index]: value_index }); //记录选择的属性  attr_index外的[]必须

    //属性处理
    var check_attrid = [];
    var check_attrname = [];
    var check_attrnames = [];
    for (var i in check_attr) {
      var attr_id = check_attr[i];
      check_attrid.push(attr_id);
      check_attrname[attr_id] = i;
    }

    //数组排序  按从小到大排
    var check_attrid_arr = check_attrid;
    check_attrid = utils.number_sort(check_attrid);
    //获取对应的属性名称
    for (var i = 0; i < check_attrid.length; i++) {
      var attr_id = check_attrid[i];
      var attr_name = check_attrname[attr_id];
      check_attrnames.push(attr_name + ':' + this.data.productDetail.skujosn[attr_name][attr_id]);
    }

    //数组转化为字符串
    check_attrid = check_attrid.join(';');
    check_attrnames = check_attrnames.join(';');

    var attr_val = this.data.productDetail.skuvaljosn[check_attrid];   //选择属性对应的属性值

    //判断属性库存
    if (attr_val && attr_val.Property_count <= 0) {
      wx.showToast({
        title: '您选择的 ' + check_attrnames + ' 库存不足，请选择其他属性',
        icon: 'none'
      })
      return false;
    }

    this.setData({
      check_attr: check_attr,
      check_attrid_arr: check_attrid_arr
    });
    
    //属性判断
    if (attr_val) {
      this.setData({
        'postData.spec_list': attr_val.Product_Attr_ID,         //选择的属性的id组合
        'postData.cattsel': attr_val.Attr_Value,        //选择属性的名称组合
        'postData.count': attr_val.Property_count,    //选择属性的库存
        'postData.showimg': typeof attr_val.Attr_Image != 'undefined' && attr_val.Attr_Image != '' ? attr_val.Attr_Image : productDetail.Products_JSON['ImgPath'][0], // 选择属性的图片
        productDetail_price: this.data.flashsale == 1 ? attr_val.xs_pricex : attr_val.Attr_Price, //选择属性的价格
        submit_flag: (!this.data.check_attr || Object.getOwnPropertyNames(this.data.check_attr).length != Object.getOwnPropertyNames(this.data.productDetail.skujosn).length) ? false : true
      });
    }

    //购买数量处理  大于最高时赋值最高值
    if (this.data.postData.Qty > this.data.postData.count) {
      this.setData({
        'postData.Qty': this.data.postData.count
      });
    }
  },

  /* 点击确定 */
  submit: function () {
    if (!app.globalData.userInfo) {
      app.login('', this.load, 'detail');
    }
    //判断是否能提交
    if (this.data.submit_flag) {
      //判断选择属性库存是否充足
      if (this.data.postData.Qty > this.data.postData.count) {
        wx.showToast({
          title: '购买数量大于库存数',
          icon: 'none',
        });
        return false;
      }
      //检查用户是否登录
      if (!app.globalData.userInfo) {
        app.login('', this.submit);
      } else {
        if (this.data.postData.cart_key == '') {
          wx.showToast({
            title: '请选择进行的操作',
            icon: 'none',
          });
          return false;
        }
        this.setData({
          'postData.UsersID': app.globalData.userInfo.Users_ID,
          'postData.User_ID': app.globalData.userInfo.User_ID,
          'postData.OwnerID': app.globalData.userInfo.Owner_Id,
          'postData.pay_type': app.globalData.init.appid,
          'postData.has_active': this.data.flashsale
        });
        app.http_req(this.data.postData, app.globalData.init.api_url, 'POST', this.checkout);
      }
    } else {
      wx.showToast({
        title: '请完善属性',
        icon: 'none',
      });
    }
  },

  //初始化提交数据
  reset_postData: function () {
    this.setData({
      'postData.spec_list': '',
      'postData.cattsel': '',
      'postData.Qty': 1,
      'postData.cart_key': '',
      check_attr: {},    //记录选择的属性
      check_attrid_arr: [],
      submit_flag: false //提交按钮状态
    });
    this.hideModal();
  },

  //添加购物车或直接购买成功跳转到checkout页面
  checkout:function(res){
    var that = this;
    if (res.status == 1) {
      if (that.data.postData.cart_key == 'CartList') {  //加入购物车
        //购物车产品数量
        that.setData({
          cart_pro_num: res.qty
        });
        wx.showToast({
          title: '加入购物车成功',
          icon: 'success',
          duration: 1000
        });
        //提交资料初始化
        that.reset_postData();
      } else if (that.data.postData.cart_key == 'DirectBuy' || that.data.postData.cart_key == 'PTCartList') {  //直接购买、拼团购买
        wx.navigateTo({
          url: '../checkout/checkout?cart_key=' + that.data.postData.cart_key
        });
      }
    } else {
      if (that.data.postData.cart_key == 'CartList') {  //加入购物车
        wx.showModal({
          title: '提示',
          content: '加入购物车失败，是否重新提交',
          confirmText: '重新提交',
          success: function (res) {
            if (res.confirm) {
              that.submit();
            } else {
              //提交资料初始化
              that.reset_postData();
            }
          },
          fail: function () {
            //提交资料初始化
            that.reset_postData();
          }
        });
      } else {
        wx.showToast({
          icon: 'loading',
          title: '服务器忙'
        });
      }
    }
  },

  // 显示遮罩层
  showModal: function (e) {
    var cart_key = e.currentTarget.dataset.action;  //DirectBuy：立即购买   CartList：加入购物车   PTCartList：拼团购买
    if ('DirectBuy,CartList,PTCartList'.indexOf(cart_key) > -1) {
      this.setData({
        'postData.cart_key': cart_key,
        submit_flag: this.data.productDetail.skujosn ? false : true
      });
    } else {
      wx.showModal({
        title: '警告',
        content: '请勿非法操作',
        showCancel: false
      });
      return false;
    }
    var animation = wx.createAnimation({
      duration: 200,
      delay: 0
    });
    this.animation = animation;
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    });
  },
  // 隐藏遮罩层
  hideModal: function () {
    this.setData({
      'postData.cart_key': ''
    });
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "step-start",
      delay: 0
    });
    this.setData({
      animationData: animation.export(),
      showModalStatus: false
    });
  },

  //获得产品的详情
  productInfo:function(res){
    if (res.errorCode === 0) {
      var productData = utils.formatShop(app.globalData.init.front_url, [res.data])[0];
      //设置标题
      app.setNavBarTitle(productData.Products_Name);
      
      this.setData({
        productDetail: productData,
        productDetail_price: productData.flashsale_flag == 1 && this.data.flashsale == 1 ? productData.flashsale_pricex : productData.Products_PriceX,
        'postData.showimg': productData.Products_JSON['ImgPath'][0],
        'postData.count': productData.Products_Count,
        'postData.Qty': this.data.postData.Qty > productData.Products_Count ? productData.Products_Count : this.data.postData.Qty,
        submit_flag: productData.skujosn ? false : true,
      });
      WxParse.wxParse('detail', 'html', productData.Products_Description, this);
    } else {
      wx.showModal({
        title: '提示',
        content: typeof res.msg !== 'undefined' ? res.msg : '产品查询失败',
        showCancel: false,
        success: function () {
          wx.navigateBack({
            delta: 1
          });
        }
      })
    }
  },

  //产品图片点击预览
  proImgPreview: function (e) {
    var index = e.currentTarget.dataset.index;
    var ImgPath = this.data.productDetail.Products_JSON.ImgPath;
    //处理缩略，去除nx
    for (var i in ImgPath) {
      ImgPath[i] = this.data.front_url + ImgPath[i].replace(/n\d\//, '');
    }
    wx.previewImage({
      current: ImgPath[index],
      urls: ImgPath
    });
  },

  //获取购物车中产品数量回调
  getCartProduct: function (res) {
    if (res.errorCode == 0 || res.errorCode == 2) {
      var productlist = res.data;
      this.setData({
        cart_pro_num: res.errorCode == 0 ? utils.cart_pro(productlist, 'Qty') : 0
      });
    } else {
      wx.showModal({
        title: '提示',
        content: res.msg,
        showCancel: false
      });
    }
  },

  //返回首页
  navigatorIndex: function(){
    wx.switchTab({
      url: '../index/index'
    });
  },

  //页面加载
  load: function () {
    if (!app.globalData.shopConfig) {
      //获取商家配置信息
      app.getShopConfig(this.load);
      return false;
    }
    this.setData({
      pro_share_poster: app.globalData.shopConfig.pro_share_poster && app.globalData.shopConfig.pro_share_poster == 1 ? 1 : 0
    });

    var detailArgs = {
      Products_ID: this.data.postData.ProductsID,
      act: 'detail'
    };
    //查询产品详情
    app.http_req(detailArgs, app.globalData.init.api_url, 'POST', this.productInfo);
    //如果用户登录，则查询购物车产品数量
    if (app.globalData.userInfo) {
      var postData = {
        UsersID: app.globalData.userInfo.Users_ID,
        User_ID: app.globalData.userInfo.User_ID,
        cart_key: 'CartList',
        action: 'get_cart',
        type: 'cart'
      };
      app.http_req(postData, app.globalData.init.api_url, 'POST', this.getCartProduct);
    }
    // 获取商家评论
    this.getBizCommit();
    wx.stopPullDownRefresh();
    wx.hideNavigationBarLoading();

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取产品id
    if (options.proid) {
      this.setData({
        'postData.ProductsID': options.proid
      });

      // 是否限时抢购
      if (options.flashsale_flag && options.flashsale_flag == 1) {
        this.setData({
          flashsale: 1
        });
      }

      //获取分享链接中携带的ownerid，用于用户注册
      if (options.ownerid) {
        app.globalData.ownerid = options.ownerid;
      }
      this.load();
    } else {
      wx.showModal({
        title: '提示',
        content: '缺少必要的参数',
        showCancel: false,
        success: function () {
          wx.navigateBack({
            delta: 1
          })
        }
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.hideLoading();

    //悬浮客服动画
    app.kefu(this);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (!app.globalData.userInfo) {
      wx.hideShareMenu();
    } else {
      wx.showShareMenu({
        withShareTicket: true
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.reset_postData();
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    this.setData({
      share_bottom_show: false
    });
    var shartData = {
      title: this.data.productDetail.Products_Name,
      path: '/pages/detail/detail?proid=' + this.data.productDetail.Products_ID + '&ownerid=' + app.globalData.userInfo.User_ID + (this.data.flashsale == 1 ? '&flashsale_flag=1' : '')
    };
    return app.shareInfo(shartData);
  },

  // 自定义分享
  share_click() {
    this.setData({
      share_bottom_show: true
    });
  },

  // 海报 转发朋友圈
  share_poster() {
    wx.showLoading({
      title: '加载中...',
    })
    this.setData({
      share_bottom_show: false
    });
    // 检查是否已经下载过二维码
    if (this.data.ewmurl != '') {
      // 直接绘制canvas
      this.contimg()
      return false;
    }
    let postArgs = {
      act: 'get_pro_share_qrcode',
      User_ID: app.globalData.userInfo.User_ID,
      pro_id: this.data.productDetail.Products_ID
    };
    app.http_req(postArgs, app.globalData.init.api_url, 'POST', (res) => {
      if (res.errorCode == 0) {
        let ewmurl = utils.img_path(app.globalData.init.front_url, res.data.qrcode); //二维码

        //先将要绘制的图片下载至本地
        wx.downloadFile({
          url: ewmurl, //二维码
          success: (res) => {
            if (typeof res.tempFilePath != 'undefined' && res.tempFilePath) {
              this.setData({
                ewmurl: res.tempFilePath,
              })
              this.contimg()
            } else {
              wx.hideLoading();
              wx.showToast({
                title: '下载资源失败，请稍后重试！',
                icon: 'none'
              })
            }
          },
          fail: function () {
            wx.hideLoading();
          }
        })
      } else {
        wx.hideLoading();
        wx.showModal({
          title: '提示',
          content: typeof res.msg != 'undefined' ? res.msg : '分享码生成失败，请稍后重试！',
          showCancel: false
        })
      }
    });
  },

  // 产品图片
  contimg() {
    // 判断产品图片是否下载
    if (this.data.pro_img != '') {
      this.pyqsys();
      return false;
    }

    let productDetail = this.data.productDetail;
    let pro_img = '';
    for (let i in productDetail.Products_JSON.ImgPath) {
      let item = productDetail.Products_JSON.ImgPath[i];
      if (item.indexOf('http') > -1) {
        pro_img = item;
        break;
      }
    }

    if (pro_img != '') {
      // 下载产品图片
      wx.downloadFile({
        url: pro_img, // 产品图片
        success: (res) => {
          if (typeof res.tempFilePath != 'undefined' && res.tempFilePath) {
            this.setData({
              pro_img: res.tempFilePath,
            })
            this.pyqsys()
          } else {
            wx.hideLoading();
            wx.showToast({
              title: '下载资源失败，请稍后重试！',
              icon: 'none'
            })
          }
        },
        fail: function () {
          wx.hideLoading();
        }
      })
    } else {
      this.pyqsys();
    }
  },

  // 获取产品图片信息
  pyqsys() {
    if (this.data.pro_img != '') {
      wx.getImageInfo({
        src: this.data.pro_img,
        success: (res) => {
          this.canvas({
            pro_img_width: res.width, // px
            pro_img_height: res.height // px
          });
        },
        fail() {
          this.canvas();
        }
      })
    } else {
      this.canvas();
    }
  },

  // 绘制分享图
  canvas(e) {
    // 查询系统的宽度
    const res = wx.getSystemInfoSync();
    var windowWidth = res.windowWidth;

    // 获取产品图片信息
    let pro_img_width = typeof e.pro_img_width != 'undefined' ? e.pro_img_width : 375;
    let pro_img_height = typeof e.pro_img_height != 'undefined' ? e.pro_img_height : 265;

    let convas_width = (280 / 375) * windowWidth; // canvas 宽度
    let convas_height = (380 / 375) * windowWidth; // canvas 高度

    const context = wx.createCanvasContext('identify');

    // 填充canvas,已解决安卓手机保存后图片底色为黑色的问题
    context.save();
    context.setFillStyle('white');//填充白色
    context.fillRect(0, 0, convas_width, convas_height);//画出矩形白色背景
    context.restore();

    // 绘制产品图片
    let pro_img_height_rel = convas_width * pro_img_height / pro_img_width;
    // 限制产品图片的最大高度
    pro_img_height_rel = pro_img_height_rel > 190 ? 190 : pro_img_height_rel;
    context.save();
    context.beginPath();
    context.drawImage(this.data.pro_img, 0, 0, convas_width, pro_img_height_rel);
    context.closePath();
    context.restore();

    // 绘制产品信息
    let productDetail = this.data.productDetail;

    //pro_img_height_rel += 30;

    // 绘制产品信息
    context.save();
    context.beginPath();
    context.fillStyle = "#000";
    context.setFontSize(16)
    let pro_name = productDetail.Products_Name;
    let textWidth = 0;  // 记录文字宽度，用于判断换行
    let textHeight = 0;  // 记录文字高度，用于限制展示文字多少
    let lastIndex = 0; //每次开始截取的字符串的索引
    let textBoxWidth = convas_width / 2 - 20;
    let initHeight = pro_img_height_rel + 30; // 绘制文字的初始位置（高度）
    for (let i = 0; i < pro_name.length; i++) {
      textWidth += context.measureText(pro_name[i]).width;
      // 判断文字高度
      if (textHeight > textBoxWidth - 20) {
        break;
      }

      // 判断是否需要换行
      if (textWidth > textBoxWidth) {
        context.fillText(pro_name.substring(lastIndex, i), 10, initHeight + textHeight); //绘制截取部分
        textHeight += 20; // 20为字体的高度
        textWidth = 0;
        lastIndex = i;
      }
      // 绘制剩余部分
      if (i == pro_name.length - 1) {
        context.fillText(pro_name.substring(lastIndex, i + 1), 10, initHeight + textHeight);
      }
    }
    context.closePath();
    context.restore();

    // 绘制价格
    context.save();
    context.beginPath();
    context.fillStyle = "red";
    context.setFontSize(18)
    textHeight += 30; // 20为字体的高度
    context.fillText('￥' + productDetail.Products_PriceX, 10, initHeight + textHeight);
    context.closePath();
    context.restore();

    // 绘制分享二维码
    context.save();
    context.beginPath();
    context.drawImage(this.data.ewmurl, convas_width / 2 + 10, pro_img_height_rel + 10, textBoxWidth, textBoxWidth);
    context.closePath();
    context.restore();

    context.draw()
    this.setData({
      fenxiang_show: true
    });
    wx.hideLoading();
  },

  // 按钮的点击事件
  preserveImg: function () {
    // 导出图片
    wx.canvasToTempFilePath({
      // x: 0,
      // y: 0, 
      // width: width,
      // height: height,
      // 导出图片宽高
      // destWidth: this.data.imgwidth,
      // destHeight: this.data.imgheight,
      // 指定canvasID
      fileType: 'jpg',
      canvasId: 'identify',
      success: function (res) {
        // console.log(res.tempFilePath)
        // 获取用户权限
        wx.getSetting({
          success(res) {
            if (!res.authSetting['scope.writePhotosAlbum']) {
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
              })
            }
          }
        })
        //图片保存到本地  
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  },

  // 关闭分享弹窗
  closefx() {
    this.setData({
      fenxiang_show: false
    })
  },
});